<template>
	<view>
		<custom title="我的邀请码" background="rgba(0,0,0,0)" titleColor="#FFFFFF" backColor="#FFFFFF" fixed="fixed"></custom>


		<view class="flex flex-y flex-y-center pr"
			style="width: 559rpx;height: 933rpx;background:  url(../../static/my/invite.png) left top / 100% 100%;margin: 100rpx auto 0 auto;">

			<view style="width: 134rpx;height: 134rpx;border-radius: 50%;overflow: hidden;margin-top: 6rpx;">
				<qq-image :url="user_info.avatarUrl" imageStyle="width:100%;height:100%;"></qq-image>
			</view>

			<view style="position: absolute;left:50%;transform: translateX(-50%);text-align: center;top:180rpx;">
				<view class="fs-36 color-333333">
					{{user_info.name}}
				</view>
				<view class="fs-26 color-999999 mt-10">
					邀请您加入
				</view>
			</view>



			<view style="position: absolute;left:50%;transform: translateX(-50%);text-align: center;top:326rpx;">
				<view style="width: 300rpx;height: 300rpx;">
					<qq-image :url="qrcode" imageStyle="width:100%;height:100%;"></qq-image>
				</view>
			</view>



			<view style="position: absolute;left:50%;transform: translateX(-50%);text-align: center;top:700rpx;">

				<view class="fs-28 color-666666" @touchstart="mycopy(user_info.id)">
					邀请码：{{user_info.id}}
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				statusbar: getApp().globalData.statusBar + 'px',
				qrcode: '',

			};
		},




		onLoad() {

			this.qrcode = uni.getStorageSync('qrcode') || '';
			this.login();
			this.get_info();



		},


		methods: {
			get_info() {
				this.request({
					url: '/chat/createQrcode',
					method: 'POST',
					data: this.ROOT + '/chat/getDownloadPage?invite=' + this.user_info.id
				}).then(res => {
					if (res.status != 200) return;
					if (res.data) {
						this.qrcode = res.data;
						uni.setStorageSync('qrcode', res.data);
					}
				});
			}
		},
	}
</script>

<template>
	<view>
		<custom title="我的邀请码" background="rgba(0,0,0,0)" titleColor="#FFFFFF" backColor="#FFFFFF" fixed="fixed">
		</custom>
		<view class="flex flex-y pr bg-invite">
			<view style="margin-top: 150rpx; margin-left: 80rpx;" class="flex flex-y-center pl-30 pr-30">
				<view
					style="width: 120rpx;height: 120rpx;border-radius: 50%;background-color: #FFFFFF;overflow: hidden;">
					<qq-image :url="user_info.avatarUrl" style="width: 100%;height: 100%;"></qq-image>
				</view>


				<view class="flex-1 over-line1 pl-30">
					<view class="flex flex-y-center">
						<view class="fs-36 color-333333 bold" style="line-height: 34rpx;">{{user_info.name}}</view>

					</view>
					<view class="fs-26 color-999999 mt-10">
						邀请您加入
					</view>
				</view>
			</view>




			<view class="qqimage_bg">
				<view class="qqimage_cq">
					<qq-image :url="qrcode"
						imageStyle="width:100%;height:100%;border: 2px solid #EEB9FF;border-radius: 20px;"></qq-image>
					<view class="qqimage_txt">立即扫码 加入我们</view>
				</view>
			</view>

			<view class="bgmineicon"></view>
			<view class="mycopy_yqm">
				<view class="fs-30" @touchstart="mycopy(user_info.id)">
					邀请码：{{user_info.id}}
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				statusbar: getApp().globalData.statusBar + 'px',
				qrcode: '',

			};
		},




		onLoad() {

			this.qrcode = uni.getStorageSync('qrcode') || '';
			this.login();
			this.get_info();



		},


		methods: {
			get_info() {
				this.request({
					url: '/chat/createQrcode',
					method: 'POST',
					data: this.ROOT + '/chat/getDownloadPage?invite=' + this.user_info.id
				}).then(res => {
					if (res.status != 200) return;
					if (res.data) {
						this.qrcode = res.data;
						uni.setStorageSync('qrcode', res.data);
					}
				});
			}
		},
	}
</script>
<style lang="scss">
	page {
		background: linear-gradient(180deg, #E1E9FF 0%, rgba(255, 255, 255, 0.95) 100%);
		border-radius: 48px 48px 48px 48px;
	}

	.bg-invite {
		height: 1200rpx;
		background: url(../../static/my/invite.png) left top / 100% 100% no-repeat;
		margin: 100rpx auto 0 auto;

		.qqimage_bg {
			position: absolute;
			left: 50%;
			background: #fff;
			transform: translateX(-50%);
			text-align: center;
			top: 326rpx;
			width: 516rpx;
			height: 604rpx;
			background: linear-gradient(180deg, #8CCFF8 70%, #A779E5 100%);
			border-radius: 20px;

			.qqimage_cq {
				height: 504rpx;
				background: #FFFFFF;
				border-radius: 20px;

				.qqimage_txt {
					font-weight: 400;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 44px;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		.mycopy_yqm {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			bottom: 150rpx;
			background: #6964D2;
			border-radius: 200px 200px 200px 200px;
			width: 380rpx;
			height: 82rpx;
			line-height: 82rpx;
			color: #fff;
		}
	}

	.bgmineicon {
		position: fixed;
		top: 60rpx;
		right: 15rpx;
		width: 350rpx;
		height: 350rpx;
		background: url(../../static/my/invite-icon.png) center center no-repeat;
		background-size: 350rpx;
	}
</style>